TypeScriptin Mapped Types dynaamisiin oliomuunnoksiin: Kattava opas

TypeScript, joka painottaa voimakkaasti staattista tyypitystä, antaa kehittäjille mahdollisuuden kirjoittaa luotettavampaa ja ylläpidettävämpää koodia. Keskeinen ominaisuus, joka edistää tätä merkittävästi, on mapped types (kartoitetut tyypit). Tämä opas sukeltaa TypeScriptin mapped types -maailmaan tarjoten kattavan ymmärryksen niiden toiminnallisuudesta, hyödyistä ja käytännön sovelluksista, erityisesti globaalien ohjelmistoratkaisujen kehittämisen yhteydessä.

Ydinajatusten ymmärtäminen

Ytimeltään mapped type antaa mahdollisuuden luoda uuden tyypin olemassa olevan tyypin ominaisuuksien perusteella. Määrität uuden tyypin iteroimalla toisen tyypin avainten yli ja soveltamalla muunnoksia arvoihin. Tämä on erittäin hyödyllistä tilanteissa, joissa sinun on muokattava dynaamisesti olioiden rakennetta, kuten muuttamalla ominaisuuksien datatyyppejä, tekemällä ominaisuuksista valinnaisia tai lisäämällä uusia ominaisuuksia olemassa olevien perusteella.

Aloitetaan perusteista. Tarkastellaan yksinkertaista rajapintaa:

            interface Person {
  name: string;
  age: number;
  email: string;
}
            

              
                Copy
              
            
          

Määritellään nyt mapped type, joka tekee kaikista Person-rajapinnan ominaisuuksista valinnaisia:

            type OptionalPerson = { 
  [K in keyof Person]?: Person[K];
};

            

              
                Copy
              
            
          

Tässä esimerkissä:

• [K in keyof Person] iteroi jokaisen Person-rajapinnan avaimen (name, age, email) läpi.
• ? tekee jokaisesta ominaisuudesta valinnaisen.
• Person[K] viittaa ominaisuuden tyyppiin alkuperäisessä Person-rajapinnassa.

Tuloksena oleva OptionalPerson-tyyppi näyttää käytännössä tältä:

            {
  name?: string;
  age?: number;
  email?: string;
}
            

              
                Copy
              
            
          

Tämä osoittaa mapped types -tyyppien voiman muokata dynaamisesti olemassa olevia tyyppejä.

Mapped Types -tyyppien syntaksi ja rakenne

Mapped type -tyypin syntaksi on melko tarkka ja noudattaa tätä yleistä rakennetta:

            type NewType = { 
  [Key in KeysType]: ValueType;
};
            

              
                Copy
              
            
          

Käydään läpi jokainen komponentti:

• NewType: Nimi, jonka annat luotavalle uudelle tyypille.
• [Key in KeysType]: Tämä on mapped type -tyypin ydin. Key on muuttuja, joka iteroi KeysType-tyypin jokaisen jäsenen läpi. KeysType on usein, mutta ei aina, keyof toisesta tyypistä (kuten OptionalPerson-esimerkissä). Se voi olla myös merkkijonoliteraalien unioni tai monimutkaisempi tyyppi.
• ValueType: Tämä määrittää uuden tyypin ominaisuuden tyypin. Se voi olla suora tyyppi (kuten string), tyyppi, joka perustuu alkuperäisen tyypin ominaisuuteen (kuten Person[K]), tai monimutkaisempi muunnos alkuperäisestä tyypistä.

Esimerkki: Ominaisuuksien tyyppien muuntaminen

Kuvittele, että sinun täytyy muuntaa kaikki olion numeeriset ominaisuudet merkkijonoiksi. Näin voit tehdä sen käyttämällä mapped type -tyyppiä:

            interface Product {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

type StringifiedProduct = {
  [K in keyof Product]: Product[K] extends number ? string : Product[K];
};

            

              
                Copy
              
            
          

Tässä tapauksessa me:

• Iteroimme jokaisen Product-rajapinnan avaimen läpi.
• Käytämme ehdollista tyyppiä (Product[K] extends number ? string : Product[K]) tarkistaaksemme, onko ominaisuus numero.
• Jos se on numero, asetamme ominaisuuden tyypiksi string; muuten säilytämme alkuperäisen tyypin.

Tuloksena oleva StringifiedProduct-tyyppi olisi:

            {
  id: string;
  name: string;
  price: string;
  quantity: string;
}
            

              
                Copy
              
            
          

Keskeiset ominaisuudet ja tekniikat

1. keyof-operaattorin ja indeksiallekirjoitusten käyttö

Kuten aiemmin esitettiin, keyof on perustyökalu mapped types -tyyppien kanssa työskentelyyn. Sen avulla voit iteroida tyypin avainten yli. Indeksiallekirjoitukset tarjoavat tavan määritellä ominaisuuksien tyyppi, kun et tiedä avaimia etukäteen, mutta haluat silti muuntaa niitä.

Esimerkki: Kaikkien ominaisuuksien muuntaminen indeksiallekirjoituksen perusteella

            interface StringMap {
  [key: string]: number;
}

type StringMapToString = {
  [K in keyof StringMap]: string;
};

            

              
                Copy
              
            
          

Tässä kaikki StringMap-tyypin numeeriset arvot muunnetaan merkkijonoiksi uudessa tyypissä.

2. Ehdolliset tyypit Mapped Types -tyyppien sisällä

Ehdolliset tyypit ovat TypeScriptin tehokas ominaisuus, jonka avulla voit ilmaista tyyppisuhteita ehtojen perusteella. Yhdistettynä mapped types -tyyppeihin ne mahdollistavat erittäin hienostuneita muunnoksia.

Esimerkki: Null- ja Undefined-arvojen poistaminen tyypistä

            type NonNullableProperties = {
  [K in keyof T]: T[K] extends (null | undefined) ? never : T[K];
};

            

              
                Copy
              
            
          

Tämä mapped type iteroi tyypin T kaikkien avainten läpi ja käyttää ehdollista tyyppiä tarkistaakseen, sallivatko arvot null- tai undefined-arvoja. Jos sallivat, tyyppi evaluoituu `never`-tyypiksi, mikä käytännössä poistaa kyseisen ominaisuuden; muuten se säilyttää alkuperäisen tyypin. Tämä lähestymistapa tekee tyypeistä vankempia poistamalla mahdollisesti ongelmalliset null- tai undefined-arvot, parantaen koodin laatua ja noudattaen globaalin ohjelmistokehityksen parhaita käytäntöjä.

3. Aputyypit tehokkuuden parantamiseksi

TypeScript tarjoaa sisäänrakennettuja aputyyppejä, jotka yksinkertaistavat yleisiä tyyppien manipulointitehtäviä. Nämä tyypit hyödyntävät mapped types -tyyppejä kulissien takana.

• Partial: Tekee kaikista tyypin T ominaisuuksista valinnaisia (kuten aiemmassa esimerkissä osoitettiin).
• Required: Tekee kaikista tyypin T ominaisuuksista pakollisia.
• Readonly: Tekee kaikista tyypin T ominaisuuksista vain luku -muotoisia.
• Pick: Luo uuden tyypin, joka sisältää vain määritellyt avaimet (K) tyypistä T.
• Omit: Luo uuden tyypin, joka sisältää kaikki tyypin T ominaisuudet paitsi määritellyt avaimet (K).

Esimerkki: Pick- ja Omit-tyyppien käyttö

            interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

type UserSummary = Pick;
// { id: number; name: string; }

type UserWithoutEmail = Omit;
// { id: number; name: string; role: string; }
            

              
                Copy
              
            
          

Nämä aputyypit säästävät sinut toistuvien mapped type -määrittelyjen kirjoittamiselta ja parantavat koodin luettavuutta. Ne ovat erityisen hyödyllisiä globaalissa kehityksessä erilaisten näkymien tai datan käyttöoikeustasojen hallinnassa käyttäjän oikeuksien tai sovelluksen kontekstin perusteella.

Tosielämän sovellukset ja esimerkit

1. Datan validointi ja muuntaminen

Mapped types ovat korvaamattomia ulkoisista lähteistä (API:t, tietokannat, käyttäjän syötteet) vastaanotetun datan validoinnissa ja muuntamisessa. Tämä on kriittistä globaaleissa sovelluksissa, joissa saatat käsitellä dataa monista eri lähteistä ja sinun on varmistettava datan eheys. Niiden avulla voit määritellä erityisiä sääntöjä, kuten datatyyppien validoinnin, ja muokata tietorakenteita automaattisesti näiden sääntöjen perusteella.

Esimerkki: API-vastauksen muuntaminen

            interface ApiResponse {
  userId: string;
  id: string;
  title: string;
  completed: boolean;
}

type CleanedApiResponse = {
  [K in keyof ApiResponse]:
    K extends 'userId' | 'id' ? number :
    K extends 'title' ? string :
    K extends 'completed' ? boolean : any;
};

            

              
                Copy
              
            
          

Tämä esimerkki muuntaa userId- ja id-ominaisuudet (alun perin merkkijonoja API:sta) numeroiksi. title-ominaisuus tyypitetään oikein merkkijonoksi ja completed säilytetään boolean-arvona. Tämä varmistaa datan johdonmukaisuuden ja välttää mahdolliset virheet myöhemmässä käsittelyssä.

2. Uudelleenkäytettävien komponenttipropsien luominen

Reactissa ja muissa käyttöliittymäkehyksissä mapped types voivat yksinkertaistaa uudelleenkäytettävien komponenttipropsien luomista. Tämä on erityisen tärkeää kehitettäessä globaaleja käyttöliittymäkomponentteja, joiden on sopeuduttava erilaisiin lokaaleihin ja käyttöliittymiin.

Esimerkki: Lokalisaation käsittely

            interface TextProps {
  textId: string;
  defaultText: string;
  locale: string;
}

type LocalizedTextProps = {
  [K in keyof TextProps as `localized-${K}`]: TextProps[K];
};

            

              
                Copy
              
            
          

Tässä koodissa uusi tyyppi, LocalizedTextProps, lisää etuliitteen jokaiseen TextProps-tyypin ominaisuuden nimeen. Esimerkiksi textId muuttuu muotoon localized-textId, mikä on hyödyllistä komponentin propsien asettamisessa. Tätä mallia voitaisiin käyttää sellaisten propsien luomiseen, jotka mahdollistavat tekstin dynaamisen muuttamisen käyttäjän lokaalin perusteella. Tämä on olennaista monikielisten käyttöliittymien rakentamisessa, jotka toimivat saumattomasti eri alueilla ja kielillä, kuten verkkokauppasovelluksissa tai kansainvälisillä sosiaalisen median alustoilla. Muunnetut propsit antavat kehittäjälle enemmän hallintaa lokalisaatioon ja mahdollisuuden luoda yhtenäinen käyttäjäkokemus maailmanlaajuisesti.

3. Dynaaminen lomakkeiden generointi

Mapped types ovat hyödyllisiä lomakekenttien dynaamisessa generoinnissa datamallien perusteella. Globaaleissa sovelluksissa tämä voi olla hyödyllistä luotaessa lomakkeita, jotka mukautuvat erilaisiin käyttäjärooleihin tai datavaatimuksiin.

Esimerkki: Lomakekenttien automaattinen generointi olion avainten perusteella

            interface UserProfile {
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
}

type FormFields = {
  [K in keyof UserProfile]: {
    label: string;
    type: string;
    required: boolean;
  };
};

            

              
                Copy
              
            
          

Tämä mahdollistaa lomakkeen rakenteen määrittämisen UserProfile-rajapinnan ominaisuuksien perusteella. Tämä välttää tarpeen määritellä lomakekenttiä manuaalisesti, mikä parantaa sovelluksesi joustavuutta ja ylläpidettävyyttä.

Edistyneet Mapped Type -tekniikat

1. Avainten uudelleenkartoitus (Key Remapping)

TypeScript 4.1 esitteli avainten uudelleenkartoituksen mapped types -tyypeissä. Tämä mahdollistaa avainten nimeämisen uudelleen tyyppiä muunnettaessa. Tämä on erityisen hyödyllistä, kun sovitetaan tyyppejä erilaisiin API-vaatimuksiin tai kun halutaan luoda käyttäjäystävällisempiä ominaisuuksien nimiä.

Esimerkki: Ominaisuuksien uudelleennimeäminen

            interface Product {
  productId: number;
  productName: string;
  productDescription: string;
  price: number;
}

type ProductDto = {
  [K in keyof Product as `dto_${K}`]: Product[K];
};

            

              
                Copy
              
            
          

Tämä nimeää jokaisen Product-tyypin ominaisuuden uudelleen alkamaan dto_-etuliitteellä. Tämä on arvokasta, kun tehdään kartoitusta datamallien ja API:en välillä, jotka käyttävät erilaista nimeämiskäytäntöä. Se on tärkeää kansainvälisessä ohjelmistokehityksessä, jossa sovellukset ovat yhteydessä useisiin taustajärjestelmiin, joilla voi olla erityisiä nimeämiskäytäntöjä, mikä mahdollistaa sujuvan integraation.

2. Ehdollinen avainten uudelleenkartoitus

Voit yhdistää avainten uudelleenkartoituksen ehdollisiin tyyppeihin monimutkaisempia muunnoksia varten, mikä mahdollistaa ominaisuuksien uudelleennimeämisen tai poissulkemisen tiettyjen kriteerien perusteella. Tämä tekniikka mahdollistaa hienostuneita muunnoksia.

Esimerkki: Ominaisuuksien poissulkeminen DTO:sta

            
interface Product {
    id: number;
    name: string;
    description: string;
    price: number;
    category: string;
    isActive: boolean;
}

type ProductDto = {
    [K in keyof Product as K extends 'description' | 'isActive' ? never : K]: Product[K]
}

            

              
                Copy
              
            
          

Tässä description- ja isActive-ominaisuudet poistetaan tehokkaasti generoidusta ProductDto-tyypistä, koska avain ratkeaa never-tyypiksi, jos ominaisuus on 'description' tai 'isActive'. Tämä mahdollistaa tiettyjen tiedonsiirto-olioiden (DTO) luomisen, jotka sisältävät vain tarvittavat tiedot eri operaatioita varten. Tällainen valikoiva tiedonsiirto on elintärkeää optimoinnin ja yksityisyyden kannalta globaalissa sovelluksessa. Tiedonsiirtorajoitukset varmistavat, että vain relevanttia dataa lähetetään verkkojen yli, mikä vähentää kaistanleveyden käyttöä ja parantaa käyttäjäkokemusta. Tämä on linjassa globaalien tietosuojamääräysten kanssa.

3. Mapped Types -tyyppien käyttö geneeristen tyyppien kanssa

Mapped types voidaan yhdistää geneerisiin tyyppeihin erittäin joustavien ja uudelleenkäytettävien tyyppimäärittelyjen luomiseksi. Tämä mahdollistaa koodin kirjoittamisen, joka pystyy käsittelemään monenlaisia eri tyyppejä, mikä lisää huomattavasti koodin uudelleenkäytettävyyttä ja ylläpidettävyyttä, mikä on erityisen arvokasta suurissa projekteissa ja kansainvälisissä tiimeissä.

Esimerkki: Geneerinen funktio olion ominaisuuksien muuntamiseen

            
function transformObjectValues(obj: T, transform: (value: T[K]) => U): {
    [P in keyof T]: U;
} {
    const result: any = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            result[key] = transform(obj[key]);
        }
    }
    return result;
}

interface Order {
    id: number;
    items: string[];
    total: number;
}

const order: Order = {
    id: 123,
    items: ['apple', 'banana'],
    total: 5.99,
};

const stringifiedOrder = transformObjectValues(order, (value) => String(value));
// stringifiedOrder: { id: string; items: string; total: string; }

            

              
                Copy
              
            
          

Tässä esimerkissä transformObjectValues-funktio hyödyntää geneerisiä tyyppejä (T, K ja U) ottaakseen vastaan olion (obj) tyyppiä T ja muunnosfunktion, joka hyväksyy yhden ominaisuuden T:stä ja palauttaa U-tyyppisen arvon. Funktio palauttaa sitten uuden olion, joka sisältää samat avaimet kuin alkuperäinen olio, mutta jonka arvot on muunnettu U-tyyppisiksi.

Parhaat käytännöt ja huomioon otettavat seikat

1. Tyyppiturvallisuus ja koodin ylläpidettävyys

Yksi TypeScriptin ja mapped types -tyyppien suurimmista eduista on lisääntynyt tyyppiturvallisuus. Määrittelemällä selkeät tyypit nappaat virheet aikaisemmin kehityksen aikana, mikä vähentää ajonaikaisten virheiden todennäköisyyttä. Ne tekevät koodistasi helpommin ymmärrettävän ja refaktoroitavan, erityisesti suurissa projekteissa. Lisäksi mapped types -tyyppien käyttö varmistaa, että koodi on vähemmän altis virheille, kun ohjelmisto skaalautuu sopeutumaan miljoonien käyttäjien tarpeisiin maailmanlaajuisesti.

2. Luettavuus ja koodityyli

Vaikka mapped types voivat olla tehokkaita, on olennaista kirjoittaa ne selkeällä ja luettavalla tavalla. Käytä kuvaavia muuttujien nimiä ja kommentoi koodiasi selittääksesi monimutkaisten muunnosten tarkoituksen. Koodin selkeys varmistaa, että kaiken taustaiset kehittäjät voivat lukea ja ymmärtää koodia. Johdonmukaisuus tyylissä, nimeämiskäytännöissä ja muotoilussa tekee koodista helpommin lähestyttävän ja edistää sujuvampaa kehitysprosessia, erityisesti kansainvälisissä tiimeissä, joissa eri jäsenet työskentelevät eri osissa ohjelmistoa.

3. Ylikäyttö ja monimutkaisuus

Vältä mapped types -tyyppien ylikäyttöä. Vaikka ne ovat tehokkaita, ne voivat tehdä koodista vaikealukuisempaa, jos niitä käytetään liikaa tai kun yksinkertaisempia ratkaisuja on saatavilla. Harkitse, olisiko suoraviivainen rajapinnan määrittely tai yksinkertainen aputoiminto sopivampi ratkaisu. Jos tyypeistäsi tulee liian monimutkaisia, niiden ymmärtäminen ja ylläpitäminen voi olla vaikeaa. Harkitse aina tasapainoa tyyppiturvallisuuden ja koodin luettavuuden välillä. Tämän tasapainon löytäminen varmistaa, että kaikki kansainvälisen tiimin jäsenet voivat tehokkaasti lukea, ymmärtää ja ylläpitää koodikantaa.

4. Suorituskyky

Mapped types vaikuttavat pääasiassa käännösaikaiseen tyyppitarkistukseen eivätkä tyypillisesti aiheuta merkittävää ajonaikaista suorituskykyhaittaa. Kuitenkin liian monimutkaiset tyyppimanipulaatiot voivat mahdollisesti hidastaa kääntämisprosessia. Minimoi monimutkaisuus ja harkitse vaikutusta käännösaikoihin, erityisesti suurissa projekteissa tai tiimeissä, jotka ovat hajallaan eri aikavyöhykkeillä ja joilla on vaihtelevia resurssirajoituksia.

Yhteenveto

TypeScriptin mapped types tarjoavat tehokkaan työkalupakin olioiden muotojen dynaamiseen muuntamiseen. Ne ovat korvaamattomia tyyppiturvallisen, ylläpidettävän ja uudelleenkäytettävän koodin rakentamisessa, erityisesti käsiteltäessä monimutkaisia datamalleja, API-vuorovaikutuksia ja käyttöliittymäkomponenttien kehitystä. Hallitsemalla mapped types -tyypit voit kirjoittaa vankempia ja mukautuvampia sovelluksia, luoden parempia ohjelmistoja globaaleille markkinoille. Kansainvälisille tiimeille ja globaaleille projekteille mapped types -tyyppien käyttö tarjoaa vankkaa koodin laatua ja ylläpidettävyyttä. Tässä käsitellyt ominaisuudet ovat ratkaisevan tärkeitä mukautuvan ja skaalautuvan ohjelmiston rakentamisessa, koodin ylläpidettävyyden parantamisessa ja parempien käyttäjäkokemusten luomisessa maailmanlaajuisesti. Mapped types tekevät koodin päivittämisestä helpompaa, kun uusia ominaisuuksia, API:ita tai datamalleja lisätään tai muokataan.